<template>
  <div class="user-check-record">
    <el-descriptions
      title="个人信息"
      direction="vertical"
      border
      class="custom-descriptions"
      :column="3"
    >
      <el-descriptions-item :rowspan="2" label="图片" align="center">
        <el-image
          class="custom-image"
          style="width: 60px"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </el-descriptions-item>
      <el-descriptions-item label="姓名">{{
        checkRecord.name
      }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{
        checkRecord.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{
        checkRecord.idcard
      }}</el-descriptions-item>
      <el-descriptions-item label="科室">
        <el-tag size="large">{{ checkRecord.department }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="就诊医生">{{
        checkRecord.doctor
      }}</el-descriptions-item>
      <el-descriptions-item label="就诊时间">{{
        checkRecord.time
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" border class="custom-descriptions">
      <el-descriptions-item label="病情描述"
        ><div style="height: 300px; overflow: auto">
          {{ checkRecord.description }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <div class="check-drug">
      <el-table
        class="drug-table"
        :data="checkRecord.drug"
        height="35vh"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="name" label="药品名称"></el-table-column>
        <el-table-column prop="num" label="数量"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="total_price" label="总价"></el-table-column>
      </el-table>
      <el-table
        class="check-table"
        :data="checkRecord.check"
        height="35vh"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="name" label="检查名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
export default {
  name: "UserCheckRecord",
  props: ["id"],
  data() {
    return {
      arrangeId: "",
      checkRecord: {
        name: "张三",
        phone: "18100000000",
        department: "儿科",
        doctor: "啊啊啊",
        time: "2024/12/30",
        idcard: "4211111111111111",
        description: "丸辣！丸辣！该吃啥吃啥！",
        drug: [
          { name: "板蓝根", num: 1, price: 10, total_price: 10 },
          { name: "感冒灵", num: 2, price: 20, total_price: 40 },
        ],
        check: [
          { name: "血常规", price: 50 },
          { name: "尿常规", price: 30 },
        ],
      },
    };
  },
  mounted() {
    axios
      .get("http://192.168.228.82:8080/arrange/getPatientRecordByArrangeId", {
        params: {
          arrangeId: this.id,
        },
      })
      .then((res) => {
        console.log(res.data.data);
        this.checkRecord = {
          name: res.data.data.patient.name,
          phone: res.data.data.patient.phone,
          department: res.data.data.doctor.department,
          doctor: res.data.data.doctor.name,
          time: dayjs(res.data.data.medicalRecord.time)
            .subtract(8, "hour")
            .format("YYYY-MM-DD HH:mm:ss"),
          idcard: res.data.data.patient.idCard,
          description:
            res.data.data.patientRecord.conditionDescribe.split("*")[1],
          drug: res.data.data.drugsWithQuantity.map((item) => ({
            name: item.name,
            num: item.quantity,
            price: item.details.price.toFixed(2),
            total_price: (item.details.price * item.quantity).toFixed(2),
          })),
          check: res.data.data.checkLists.map((item) => ({
            name: item.name,
            price: item.price.toFixed(2),
          })),
        };
      });
  },
};
</script>

<style scoped>
.user-check-record {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 20px; /* 添加间距 */
  height: 100vh;
  overflow-y: auto;
  margin-top: 20px;
  margin-left: -10px;
  width: 100vw;
}
.custom-descriptions {
  width: 100vw; /* 设置描述组件的宽度 */
  font-size: 14px; /* 设置字体大小 */
}

.custom-image {
  width: 80px; /* 设置图片宽度 */
  height: 80px; /* 设置图片高度 */
}
.check-drug {
  width: 90%; /* 设置 check-drug 的宽度 */
  padding: 10px; /* 添加内边距 */
}
</style>
